<!-- modal  -->
<template>
  <div
    class="anov-modal-wrapper"
    id="modalWrapper"
    ref="modalWrapper"
    v-show="modalFlag"
  >
    <div class="anov-modal-mask"></div>
    <div class="anov-modal-content" :class="computClass" :style="modalStyle">
      <div class="anov-modal-top anov-modal-top1">
        <div class="anov-modal-top-img">
          <svg
            id="border1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 750.33 24.3"
          >
            <path
              class="anov-border1-path"
              d="M373,4h4V0h-4Zm0,6h4V6h-4ZM739.67.33H714.33l4,3.66h19l9.34,9.33v6l3.66,5v-13ZM720,5.66,722.83,9h16.34l-3.5-3.33ZM461.75.16l-4.5,4.5h257L709.75.41ZM381,0V4h63.33L442,7.32H381V9.65h68.67L458.33.33ZM0,11.32v13l3.67-5v-6L13,4H32L36,.33H10.67ZM11.17,9H27.5l2.83-3.33H14.67ZM40.58.41l-4.5,4.25h257l-4.5-4.5ZM300.67,9.65h68.66V7.32h-61L306,4h63.33V0L292,.33Z"
            />
          </svg>
        </div>
        <div class="anov-modal-top-color">
          <svg
            id="color1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 750 24"
          >
            <path
              class="anov-color1-path"
              d="M0,25V10.94L10.44.5H739.56L750,10.94V25Z"
            />
          </svg>
        </div>
      </div>
      <div class="anov-modal-center">
        <!-- added by WUYAX @2021-07-23 -->
        <component
          ref="comp"
          :is="params.componentsName"
          v-bind="params"
          :data="params"
        ></component>
      </div>
      <div class="anov-modal-top anov-modal-bottom">
        <div class="anov-modal-top-img">
          <svg
            id="border2"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 750.33 24.3"
          >
            <path
              class="anov-border1-path"
              d="M373,4h4V0h-4Zm0,6h4V6h-4ZM739.67.33H714.33l4,3.66h19l9.34,9.33v6l3.66,5v-13ZM720,5.66,722.83,9h16.34l-3.5-3.33ZM461.75.16l-4.5,4.5h257L709.75.41ZM381,0V4h63.33L442,7.32H381V9.65h68.67L458.33.33ZM0,11.32v13l3.67-5v-6L13,4H32L36,.33H10.67ZM11.17,9H27.5l2.83-3.33H14.67ZM40.58.41l-4.5,4.25h257l-4.5-4.5ZM300.67,9.65h68.66V7.32h-61L306,4h63.33V0L292,.33Z"
            />
          </svg>
        </div>
        <div class="anov-modal-top-color">
          <svg
            id="color2"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 750 24"
          >
            <path
              class="anov-color1-path"
              d="M0,25V10.94L10.44.5H739.56L750,10.94V25Z"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from '@/assets/js/app/cmlpanel/util/bus.js'
import validPeriod from './valid-period'
import modalSimple from './modal-simple'
import chipLoad from './chip-load'
import * as anov from 'anov-core'
import systemCheck from './system-check'
import expireDay from './expire-day'
import _getCompByTagName from './util'
import validError from './valid-error'
import guide from './anov-guide'
export default {
  components: {
    validPeriod,
    modalSimple,
    systemCheck,
    chipLoad,
    expireDay,
    validError,
    guide
  },
  name: 'modal',
  data() {
    return {
      modalFlag: false,
      params: {
        type: '',
        content: '',
        onClose: function () {}
      },
      modalStyle: {},
      computClass: '',
      componentsName: '',
      modalSoundId: null
    }
  },
  computed: {
    ...anov.envServer.mapState(['modalInfo'])
  },
  watch: {},
  methods: {
    open(params) {
      this.modalStyle = {}
      this.componentsName = params.componentsName
        ? params.componentsName
        : 'modalSimple'
      this.modalStyle = params.style
      //设置app filter
      let appDom = document.getElementById('app')
      TweenMax.to(appDom, 0.5, { filter: 'blur(10px)' })
      TweenMax.to('.anov-modal-wrapper', 0.5, { opacity: 1, zIndex: 1 })
      let componentsClass = params.componentsName
      if (!params.type || params.type == 'success') {
        this.computClass += 'anov-success ' + componentsClass
        this.modalSoundId = anov.soundServer.play({ type: 'modalSuccess' })
      } else if (params.type == 'warn') {
        this.computClass += 'anov-warning ' + componentsClass
        // this.modalSoundId = anov.soundServer.play({type: 'modalWarning'})
      } else if (params.type == 'error') {
        this.computClass += 'anov-error ' + componentsClass
        // this.modalSoundId = anov.soundServer.play({type: 'modalError'})
      }
      this.params = params
      this.modalFlag = true
      // modified by WUYAX @2021-07-23
      this.$nextTick(() => {
        this.init(params)
      })
    },
    init(params) {
      let componentsTl = _getCompByTagName(this.componentsName)[0]
      let validModal = _getCompByTagName(this.componentsName)
      this.tl = new TimelineMax({
        autoRemoveChildren: true
      })
      let tw = TweenMax.to('.anov-modal-wrapper', 0.1, { opacity: 1 })
      let tw0 = TweenMax.to('.anov-modal-mask', 0.1, { opacity: 0 })
      let tw1 = TweenMax.to('.anov-modal-top1', 0.2, { opacity: 1 })
      let tw2 = TweenMax.to('.anov-modal-bottom', 0.2, { opacity: 1 })
      this.tl.addLabel('start')
      this.tl
        .add(tw, 'start+=0')
        .add(tw0, 'start+=0')
        .add(tw1, 'start+=0.2')
        .add(tw2, 'start+=0.2')
      if (params.content) {
        this.tl.add(componentsTl.init(params), 'start+=.5')
      } else {
        this.tl.add(componentsTl.init, 'start+=.5')
      }

      if (!validModal) {
        let tw3 = TweenMax.from('.anov-modal-center', 0.4, { height: 0 })
        this.tl.add(tw3, 'start+=0.3')
      }
    },
    reset() {
      var appDom = document.querySelector('#app')
      TweenMax.to(appDom, 0.5, { filter: '' })
      TweenMax.to('.anov-modal-wrapper', 0.5, { opacity: 0, zIndex: '-1' })
    },
    destroy(params) {
      // if (!params) {
      //   this.componentsName = 'modalSimple'
      // } else {
      //   this.componentsName = params.componentsName
      // }
      if (params.componentsName) {
        this.componentsName = params.componentsName
        let componentsTl = anov.partServer.getCompByTagName(
          this.componentsName
        )?.[0]
        anov.soundServer.play({ type: 'modalError' })
        this.reset()
        componentsTl?.destroy(params)
      }
    }
  },
  created() {},
  mounted() {
    EventBus.$on('closeModal', (state, data) => {
      this.destroy(state)
    })
    EventBus.$on('openModal', (state, data) => {
      this.open(state)
    })
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
@import '../../../css/sys-style/_lib-variable.scss';

.anov-modal-wrapper {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.anov-modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
}
.anov-modal-content {
  width: 750px;
  z-index: 1000;
  // box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
  .anov-modal-top {
    position: relative;
    width: 100%;
    opacity: 0;
    .anov-modal-top-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .anov-modal-top-color {
      height: 100%;
    }
  }
  .anov-modal-bottom {
    margin-top: -5px;
    opacity: 0;
    transform: rotateX(180deg);
  }
  .anov-modal-center {
    position: relative;
    padding: 30px 0;
    margin-top: -5px;
    background: rgba(16, 16, 21, 0.6);
    &::before {
      position: absolute;
      content: '';
      left: 0;
      top: 25%;
      width: 1px;
      height: 50%;
    }
    &::after {
      position: absolute;
      content: '';
      right: 0;
      top: 25%;
      width: 1px;
      height: 50%;
    }
  }
}
.anov-color1-path {
  fill: rgba(16, 16, 21, 0.6);
}
.anov-success {
  color: $modal-success-color;
  .anov-border1-path {
    fill: $modal-success-color;
  }
  .anov-modal-center {
    border-left: 1px solid $modal-success-color5;
    border-right: 1px solid $modal-success-color5;
    &::before {
      background: $modal-success-color;
    }
    &::after {
      background: $modal-success-color;
    }
  }
  .anov-modal-circle-o {
    border: 2px solid $modal-success-color5;
  }
  .anov-modal-circle-i {
    border: 2px solid $modal-success-color5;
  }
  .anov-modal-text {
    color: $modal-success-color;
  }
  .anov-modal-btn {
    color: $modal-success-color;
    border: 1px solid $modal-success-color;
    box-shadow: 0 0 10px $modal-success-color3,
      0 0 10px $modal-success-color3 inset;
    &:hover {
      background: $modal-success-color;
      color: #000;
    }
  }
  .icon_jinggao {
    color: $modal-success-color;
    text-shadow: 0 0 16px $modal-success-color6,
      2px 2px 12px $modal-success-color;
  }
}
.anov-warning {
  color: $modal-warn-color;
  .anov-border1-path {
    fill: $modal-warn-color;
  }
  .anov-modal-center {
    border-left: 1px solid $modal-warn-color5;
    border-right: 1px solid $modal-warn-color5;
    &::before {
      background: $modal-warn-color;
    }
    &::after {
      background: $modal-warn-color;
    }
  }
  .anov-modal-circle-o {
    border: 2px solid $modal-warn-color5;
  }
  .anov-modal-circle-i {
    border: 2px solid $modal-warn-color5;
  }
  .anov-modal-text {
    color: $modal-warn-color;
  }
  .anov-modal-btn {
    color: $modal-warn-color;
    border: 1px solid $modal-warn-color;
    box-shadow: 0 0 10px $modal-warn-color3, 0 0 10px $modal-warn-color3 inset;
    &:hover {
      background: $modal-warn-color;
      color: #000;
    }
  }
  .icon_jinggao {
    color: $modal-warn-color;
    text-shadow: 0 0 16px $modal-warn-color6, 2px 2px 12px $modal-warn-color;
  }
}
.anov-error {
  color: $modal-error-color;
  .anov-border1-path {
    fill: $modal-error-color;
  }
  .anov-modal-center {
    border-left: 1px solid $modal-error-color5;
    border-right: 1px solid $modal-error-color5;
    &::before {
      background: $modal-error-color;
    }
    &::after {
      background: $modal-error-color;
    }
  }
  .anov-modal-circle-o {
    border: 2px solid $modal-error-color5;
  }
  .anov-modal-circle-i {
    border: 2px solid $modal-error-color5;
  }
  .anov-modal-text {
    color: $modal-error-color;
  }
  .anov-modal-btn {
    color: $modal-error-color;
    border: 1px solid $modal-error-color;
    box-shadow: 0 0 10px $modal-error-color3, 0 0 10px $modal-error-color3 inset;
    &:hover {
      background: $modal-error-color;
      color: #000;
    }
  }
  .icon_jinggao {
    color: $modal-error-color;
    text-shadow: 0 0 16px $modal-error-color6, 2px 2px 12px $modal-error-color;
  }
}

.qr-image {
  .anov-modal-center {
    margin-top: -5px;
  }
  .anov-modal-bottom {
    margin-top: -5px;
  }
}
</style>
